/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: app/[locale]/security/page.tsx
 * Description: Security & responsible deployment page — governance controls and practices
 */

import type { Metadata } from "next";
import Container from "@/components/Container";
import SectionHeading from "@/components/SectionHeading";
import { getMessages, isLocale, type Locale } from "@/lib/i18n";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  if (!isLocale(locale)) return {};
  const { meta } = getMessages(locale);
  return { title: { absolute: meta.security.title }, description: meta.security.description };
}

export default async function SecurityPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { security } = getMessages(locale as Locale);

  return (
    <>
      <section className="relative overflow-hidden border-b border-line">
        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />
        <Container className="relative py-20 sm:py-28">
          <SectionHeading as="h1" title={security.title} lead={security.lead} />
        </Container>
      </section>

      <section className="py-16 sm:py-20">
        <Container>
          <ul className="grid gap-4 sm:grid-cols-2">
            {security.items.map((item) => (
              <li
                key={item.title}
                className="rounded-2xl border border-line bg-card p-7 shadow-sm"
              >
                <div className="flex items-start gap-4">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent-soft"
                  >
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path
                        d="M8 1.5l5 2v4c0 3.2-2.1 5.6-5 7-2.9-1.4-5-3.8-5-7v-4l5-2z"
                        stroke="#0b6b4a"
                        strokeWidth="1.5"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </span>
                  <div>
                    <h2 className="text-base font-semibold text-ink">{item.title}</h2>
                    <p className="mt-2 text-sm leading-relaxed text-ink-faint">{item.body}</p>
                  </div>
                </div>
              </li>
            ))}
          </ul>
          <p className="mx-auto mt-14 max-w-3xl border-l-2 border-accent pl-6 font-display text-xl leading-relaxed text-ink">
            {security.closing}
          </p>
        </Container>
      </section>
    </>
  );
}